﻿document.getElementById('passForm').addEventListener('submit', function(event) {
    event.preventDefault();
    console.log('表单提交成功！'); // 调试信息：表单提交事件已触发

    // 获取用户输入的信息
    const name = document.getElementById('name').value;
    const subject = document.getElementById('subject').value;
    const grade = document.getElementById('grade').value;
    const photo = document.getElementById('photo').files[0]; // 获取上传的文件

    // 调试信息：打印用户输入的信息和上传的文件
    console.log('姓       名:', name);
    console.log('学       科:', subject);
    console.log('年 级/科 室:', grade);
    console.log('上传的文件:', photo);

    // 检查是否上传了照片
    if (!photo) {
        alert('请上传一寸照片！');
        return;
    }

    // 使用 FileReader 读取上传的照片
    const reader = new FileReader();
    reader.onload = function(e) {
        console.log('照片读取成功！'); // 调试信息：照片已成功读取

        // 创建一个 Image 对象，用于加载照片
        const img = new Image();
        img.src = e.target.result;

        img.onload = function() {
            console.log('照片加载成功！'); // 调试信息：照片已成功加载

            // 获取 Canvas 元素和上下文
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');

            // 加载模板图片
            const template = new Image();
            template.src = 'template.jpg'; // 确保 template.jpg 文件存在
            console.log('模板图片路径:', template.src); // 调试信息：打印模板图片路径

            template.onload = function() {
                console.log('模板图片加载成功！'); // 调试信息：模板图片已成功加载

                // 设置 Canvas 的尺寸与模板图片一致
                canvas.width = template.width;
                canvas.height = template.height;

                // 在 Canvas 上绘制模板图片
                ctx.drawImage(template, 0, 0);

                // 添加用户信息到 Canvas
                ctx.font = 'bold 40px Arial'; // 设置字体
                ctx.fillStyle = 'black'; // 设置文字颜色
                ctx.fillText(`姓          名: ${name}`, 245, 850); // 添加姓名
                ctx.fillText(`学          科: ${subject}`, 245, 920); // 添加学科
                ctx.fillText(`年 级/科 室: ${grade}`, 245, 990); // 添加年级/科室

                // 添加用户照片到 Canvas
                ctx.drawImage(img, 303, 380, 229, 300); // 调整照片位置和大小

                // 生成图片并下载
                const link = document.createElement('a');
                link.download = '出门证.jpg'; // 设置下载文件名
                link.href = canvas.toDataURL('image/jpeg'); // 将 Canvas 转换为图片
                link.click(); // 触发下载

                console.log('出门证生成成功！'); // 调试信息：出门证已生成并下载
            };

            template.onerror = function() {
                console.error('模板图片加载失败，路径:', template.src); // 调试信息：模板图片加载失败
                alert('模板图片加载失败，请检查文件路径！');
            };
        };

        img.onerror = function() {
            console.error('照片加载失败！'); // 调试信息：照片加载失败
            alert('照片加载失败，请检查文件格式！');
        };
    };

    reader.onerror = function() {
        console.error('照片读取失败！'); // 调试信息：照片读取失败
        alert('照片读取失败，请重试！');
    };

    // 开始读取照片文件
    reader.readAsDataURL(photo);
});